<template>
  <!-- @click="play_song" -->
  <div class="song" @click="play_song">
    <div class="num" v-if="song_data.idx">
      <span :style="{color:(song_data.idx <= 3 && is_rank) ? 'red' : ''}">{{ song_data.idx}}</span>
    </div>
    <div class="song_l">
      <div>{{ song_data.song_name }}</div>
      <div>{{song_data.ars | ars_filter}} - {{ song_data.album_name }}</div>
    </div>
    <div class="song_r">
      <!-- 需要第二个条件, 当前 song 实例内的 id 与正在播放的音频 id 是否一致 -->
      <van-icon
        v-if="play_state && song_info.id == song_data.id"
        name="pause-circle-o"
        @click.stop="pause_song"
      />
      <van-icon v-else name="play-circle-o" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { check_music } from "../api/common";
import { Toast } from "vant";
export default {
  props: {
    song_data: Object,
    // 用于接收当前歌曲的歌单 id 集合
    id_list: Array,
    // idx 用于接收一个下标, 表示当前歌曲在歌单内的 位置
    // 为了方便后续通过 +1 -1 来切换上下首
    idx: Number,
  },
  data() {
    return {
      is_rank: true,
    };
  },
  computed: {
    ...mapState(["play_state", "song_info"]),
  },
  filters: {},
  methods: {
    async play_song() {
      // 在播放音频前, 先验证是否有版权, 如果没有则使用 Toast 弹窗提示;
      let check_res = await check_music(this.song_data.id);

      // 如果有权限, 则 获取歌曲详情 放至 vuex 并 播放歌曲;
      if (check_res.data.success) {
        this.$audio.playSong(this.song_data.id);

        // 将当前 歌曲所在列表的 id 集合存至仓库内作为播放列表;
        this.$store.commit("set_play_list", this.id_list);

        // 改变 vuex 内歌曲的下标
        this.$store.commit("change_idx", this.idx);
      } else {
        // 弹窗告知用户无版权
        Toast("暂无版权");
      }
    },
    pause_song() {
      this.$audio.pause();
    },
  },
  watch: {
    $route: {
      handler(val) {
        if (val.name == "Rank") {
          this.is_rank = true;
        } else {
          this.is_rank = false;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.song {
  border: 1px solid black;
  width: 100%;
  display: flex;
  .song_l {
    width: 90%;
    text-align: left;
    padding: 0 3%;
  }
  .song_r {
    width: 10%;
    i {
      font-size: 30px;
    }
  }
}
</style>